<template>
  <div class="wrap">
    <a-card class="card_header">
      <Header></Header>
    </a-card>
    <a-card class="card_content">
      <a-table
        :data="equipmentTypeStore.$state.equipmentTypeList"
        :columns="devTypeTableColumns"
        :bordered="{ cell: true }"
        :pagination="{
          total: equipmentTypeStore.$state.total,
          current: equipmentTypeStore.$state.getEquipmentTypeListParam.page
        }"
        @page-change="pageChange"
      >
        <!-- 序号插槽 -->
        <template #index="{ rowIndex }">
          <span>{{ (equipmentTypeStore.getEquipmentTypeListParam.page - 1) * 10 + (rowIndex + 1) }}</span>
        </template>

        <!-- 操作插槽 -->
        <template #operation="{ rowIndex }">
          <div>
            <a-button
              type="primary"
              @click="equipmentTypeTableEditClick(equipmentTypeStore.$state.equipmentTypeList[rowIndex])"
            >
              <template #icon>
                <icon-edit />
              </template>
              编辑
            </a-button>
          </div>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts">
import Header from './module/header/index.vue'
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'equipmentType'
})
</script>
<script lang="ts" setup>
// 引入
import { useEquipmentTypeStore } from '@/store'
import { Message } from '@arco-design/web-vue'
const equipmentTypeStore = useEquipmentTypeStore()

// 定义设备类型表格渲染的字段规则
const devTypeTableColumns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index',
    align: 'center',
    width: 80
  },
  {
    title: '设备类型名称',
    dataIndex: 'devTypeName',
    slotName: 'devTypeName',
    align: 'center',
    width: 300
  },
  {
    title: '设备类型描述',
    dataIndex: 'devTypeDesc',
    slotName: 'devTypeDesc',
    align: 'center',
    width: 300
  },
  {
    title: '操作',
    dataIndex: 'operation',
    slotName: 'operation',
    align: 'center',
    width: 300
  }
])

// 当前页码发生变化的change事件
const pageChange = (e: any) => {
  console.log(e)

  equipmentTypeStore.$state.getEquipmentTypeListParam.page = e
  equipmentTypeStore
    .getEquipmentTypeListFunc()
    .then(() => {
      // Message.success('加载成功')
    })
    .catch(() => {
      // Message.success('加载失败')
    })
}

// 表格每一行的编辑按钮点击事件
const equipmentTypeTableEditClick = (row: any) => {
  console.log(row)
}

// 初始化
onMounted(() => {
  equipmentTypeStore
    .getEquipmentTypeListFunc()
    .then(() => {
      // Message.success('加载成功')
    })
    .catch(() => {
      // Message.success('加载失败')
    })
})
</script>

<style scoped>
.wrap {
  padding: 14px;
}

.card_header {
  overflow-x: auto;
  margin-bottom: 10px;
}
</style>
